<html>

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<script type="importmap">
	{
	  "imports": {
		"three": "../three.js-r151/build/three.module.js",
		"three/addons/": "../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
	<script type="module">
		import * as THREE from 'three';
		import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

		const scene = new THREE.Scene();
		const geometry = new THREE.BoxGeometry(1, 1, 1);
		const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
		const cube = new THREE.Mesh(geometry, material);
		scene.add(cube);

		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.z = 5;

		const renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);
		
		// 设置相机控件轨道控制器OrbitControls
		const controls = new OrbitControls(camera, document.body);
		// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
		controls.addEventListener('change', function () {
			renderer.render(scene, camera); //执行渲染操作
		});//监听鼠标、键盘事件

		
		renderer.render(scene, camera);
	</script>
</body>

</html>